<template>
  <el-dialog
    v-model="visible"
    title="修改登录密码"
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      class="password-form"
    >
      <!-- <el-form-item label="手机号码" prop="phone">
        <el-input
          v-model="formData.phone"
          placeholder="请输入手机号码"
          maxlength="11"
          disabled
        />
      </el-form-item> -->
      <!-- <el-form-item label="验证码" prop="code">
        <div class="verify-code-input">
          <el-input
            v-model="formData.code"
            placeholder="请输入验证码"
            maxlength="6"
          />
          <el-button
            type="primary"
            :disabled="!!timer"
            @click="handleGetVerifyCode"
          >
            {{ timer ? `${countdown}s后重新获取` : "获取验证码" }}
          </el-button>
        </div>
      </el-form-item> -->
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          v-model="formData.oldPassword"
          type="password"
          placeholder="请输入原密码"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="formData.newPassword"
          type="password"
          placeholder="请输入新密码"
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { captchaSMS } from "@/api/system";
import { useUserStore } from "@/store/modules/user";
const { logOut } = useUserStore();
const visible = ref(false);
const formRef = ref<FormInstance>();
import CryptoJS from "crypto-js";

const formData = reactive({
  newPassword: "",
  oldPassword: ""
});

onMounted(() => {
  //清除之前数据
  handleClose();
});
const rules = reactive<FormRules>({
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
  ],
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }]
});

const handleConfirm = async () => {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    // TODO: 调用修改密码接口
    const { code, message } = await captchaSMS({
      oldPassword: CryptoJS.MD5(formData.oldPassword).toString(),
      newPassword: CryptoJS.MD5(formData.newPassword).toString()
    });
    console.log("修改密码");
    if (code == 200) {
      handleClose();
      ElMessage.success("密码修改成功");
      logOut({ type: 1 });
    } else if (code == 500) {
      ElMessage.error(message);
    } else {
      ElMessage.error(message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    // console.error(error.message);
  }
};

const handleClose = () => {
  visible.value = false;
  formRef.value?.resetFields();
};

defineExpose({
  visible
});
</script>

<style scoped>
.password-form {
  padding: 20px;
}

.verify-code-input {
  display: flex;
  gap: 8px;
}

.verify-code-input .el-button {
  flex-shrink: 0;
  width: 120px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>
